html,
body {
	margin: 0;
	padding: 0;
	font-family: 微软雅黑;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

.page-menu {
	height:100%;
	overflow: hidden; 
}

.page-menu .title {
	position: relative;
	margin-top: 2.34vw;
	margin-bottom: 5vw;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px;
}
.page-menu .title .set{
	height:100%;
	width:7vw;
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	z-index: 999;
}
.page-menu .title img {
	display: block;
	width: 100%;
	height: auto;
}

.page-menu .title h2 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	font-size: 4vw;
	font-weight: 100;
}

.page-menu {
	background: url(../img/menu-bg.jpg) center center;
	background-size: cover
}

.page-menu .content {
	height: calc(100% - 9.14vw);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.page-menu .wrap {
	display: flex;
	overflow: hidden;
	width: 90%;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	left: 5%;
}

.page-menu .page-menu-left .swiper-slide {
	opacity: 0 !important;
}

.page-menu .page-menu-left .swiper-slide.swiper-slide-active {
	opacity: 1 !important;
}

.page-menu .page-menu-left .swiper-slide img {
	border-radius: 4vw;
	overflow: hidden;
}

.page-menu-left {
	width: 44%;
	float: left;
	position: relative;
	overflow: hidden;
}

.page-menu-left-swiper {}

.page-menu-right {
	width: 52%;
	float: right;
	margin-left: 4vw;
	font-size: 3vw;
	position: relative;
}

.page-menu-right .active {
	font-size: 4vw;
}

.page-menu-left .swiper-slide {
	height: 100%;
	overflow: hidden;
}

.page-menu-right ul {
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0px;
}

.page-menu-right ul li {
	height: 20%;
	padding: 0px 4vw;
	border-radius: 0 5px 5px 0;
	box-sizing: border-box;
	position: relative;
	color: #FFFFFF;
}

.page-menu-right ul li .p {
	margin: 0;
	padding: 0;
	transition: font-size 0.1s;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	left: 0;
	right: 0;
}

.page-menu-right ul li .p-wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4vw;
	right: 4vw;
	border-top: 1px solid #e0e1c2;
}

.page-menu-right ul li:first-child .p-wrap {
	border-top: 0;
	overflow: hidden;
}

.page-menu-right ul li .p-wrap .pull-right {
	float: right;
	font-weight: normal;
	position: relative;
	padding-left: 5vw;
}

.page-menu-right ul li .p small {
	font-size: 65%;
}

.page-menu-right ul li .p span {
	float: left;
	font-size: 1.3vw;
	text-align: right;
	line-height: 1.5vw;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	-webkit-transform: translateY(-50%);
	width: 4vw;
}

.page-menu-right ul li.active .p span {
	font-size: 1.7vw;
	line-height: 2vw;
}

.page-menu-right ul li.active {
	background: url(../img/li-active.png) center center;
	background-size: 100% 100%;
	color: #5b0a09;
}

.page-menu-left .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
}
.modal{
	position: fixed;
	z-index: 999;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
}
.modal .modal-content{
	width:50%;
	position: absolute;
	left:25%; 
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	background: #f5f5f5;
	padding:5vw;
	border-radius: 10px;
	box-sizing: border-box;
	box-shadow: rgba(0,0,0,0.5) 0px 0px 20px;
}
.page-check-out .modal .modal-content{
	width:80%;
	left:10%; 
}
.modal .modal-content input{
	width:40vw;
	line-height: 2;
	border:1px solid #ccc;
	border-radius: 5px;	
	margin-bottom: 2vw;
	padding:0 1em;
	font-size:2vw;
	box-sizing: border-box;
}

.modal .modal-content select{
	width:100%;
	height: 8vw;
	line-height: 2;
	border:1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 2vw;
	padding:0 1em;
	font-size:4vw;
	box-sizing: border-box;
}

.page-check-out .modal .modal-content input{
	width:70vw;
	line-height: 2;
	border:1px solid #ccc;
	border-radius: 5px;	
	margin-bottom: 2vw;
	padding:0 1em;
	font-size:4vw;
	box-sizing: border-box;
}
.modal-content .button-sure{
	width:40%;
	line-height: 2;
	font-size:2vw;
	float: left;
	background: #ddd;
	border:1px solid #ccc;
	border-radius: 5px;	
}
.modal-content .button-cancel{
	width:40%;
	line-height: 2;
	font-size:2vw;
	float: right;
	background: #ddd;
	border:1px solid #ccc;
	border-radius: 5px;	
}
.page-check-out .modal .button-sure,
.page-check-out .modal .button-cancel{
	font-size:3.6vw;
}
.mykb-box {
	width: 100%;
	user-select: none;
	-ms-user-select: none;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.num-key {
	overflow: hidden;
}

.mykb-box ul {
	margin-left: -0.5px;
	margin-right: -0.5px;
}

.mykb-box ul,
.mykb-box li {
	list-style: none;
}

.mykb-box li {
	width: 25%;
	height: 23vw;
	line-height: 23vw; 
	text-align: center;
	background: #fff;
	float: left;
	color: #111;
	font-size: 7vw;
	cursor: pointer;
	border: 1px solid #f5f5f5;
	box-sizing: border-box;
	font-weight: normal;
}

.mykb-box li.active {
	box-shadow: 0px -2px 1px #000;
}

.mykb-box .func {
	color: #fff;
	width: 25%;
}

.mykb-box .exit {
	background: #F44336;
}

.mykb-box .del {
	background: #fff;
	position: relative;
}

.mykb-box .del img {
	width: 25%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.mykb-box .sure {
	background: #4CAF50;
	width: 25%;
	height: 69vw;
	float: right;
	line-height: 1.5;
	padding: 24vw 0;
}

.mykb-box .jump {
	background: #ff7800;
	position: relative;
}
.mykb-box .jump img{
	height:70%;
	display: block; 
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.page-check-out {
	background: #f5f5f5;
}

.page-check-out h2 {
	margin: 0;
	padding: 0;
	line-height: 3;
	font-size: 4.4vw;
	font-weight: normal;
	text-align: center;
}

.page-check-out h2 .set{
	height:100%;
	width:7vw;
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	z-index: 999;
}
.page-check-out h2.style-2 {
	background: #4CAF50;
	color: #fff;
}

.page-check-out .custom-price-wrap {
	background: #FFFFFF;
	padding: 4vw 5vw;
}

.page-check-out .custom-price-wrap #custom-price {
	width: calc(100% - 2em);
	line-height: 2.5;
	border-radius: 5px;
	border: 1px solid #ccc;
	padding: 0 1em;
	text-align: right;
	font-size: 8vw;
	height:20vw;
}

.page-check-out .swiper-slide {
	opacity: 0!important;
}

.page-check-out .swiper-slide.swiper-slide-active {
	opacity: 1!important;
}
.page-check-out .mid-swiper .swiper-slide {
	opacity: 1!important;
}
.page-check-out .bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

.page-check-out .bottom ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	margin-left: -0.5px;
	margin-right: -0.5px;
}

.page-check-out .bottom ul li {
	width: 25%;
	float: left;
}

.page-check-out .bottom ul li a {
	display: block;
	height: 17vw;
	line-height: 17vw;
	text-align: center;
	background: #fff;
	color: #111;
	font-size: 10vw;
	cursor: pointer;
	border: 1px solid #f5f5f5;
	box-sizing: border-box;
	font-weight: normal;
}

.page-check-out .bottom ul li a.text {
	font-size: 7vw;
}

.page-check-out .bottom ul li a.jump2 {
	background: #ff7800;
	color: #fff;
	position: relative;
}
.page-check-out .bottom ul li a.jump2 img{
	height:70%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	position: absolute;
}
.page-check-out .bottom ul li a.sure2 {
	background: #4CAF50;
	color: #fff;
}
.page-check-out .top{
	background: #fff;
	padding:1vw 5vw ;
	overflow: hidden;
}
.page-check-out .top .count{
	font-size:4.4vw;
	line-height: 2.5;
	float:left;
	width:40%;
}
.page-check-out .top .count span{
	float: right;
}
.page-check-out .top .cost{
	font-size: 4.4vw;
	text-align: left;
	line-height: 2.5;
	width:50%;
	float:right;
}
.page-check-out .top .cost span{
	color:#e26a00;
	margin-left:1em;
}
.page-check-out .mid{
	/*height:calc(100% - 51.3vw);*/
	height:calc(100% - 48.3vw);
	padding:0 5vw;
}
.page-check-out .mid .mid-swiper{
	height:100%;
}
.page-check-out .mid .mid-swiper .swiper-slide{
	height:100%;
}
.page-check-out .mid .swiper-pagination-bullets{
	left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.page-check-out .mid .center{
	top: 50%;
	width:100%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    overflow: hidden;
    position: absolute;
}
.page-check-out .mid .col-sm-4{
	width:33.33%;
	float: left;
	padding:2vw 2vw 0 2vw;
	box-sizing: border-box;
}
.page-check-out .mid .col-sm-4 .img-wrap{
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.page-check-out .mid .col-sm-4 .img-wrap .add{
	content: '+';
	display: block;
	text-align: center;
	line-height:13vw;
	color:#fff;
	font-size:6vw;
	bottom:0;
	right:0;
	border-radius: 10px;
	background: rgba(26,175,22,0.5);
	width:13vw;
	height:13vw;
	position: absolute;
}
.page-check-out .mid .col-sm-4 img{
	display: block;
	width:100%;
	height:26vw;
}
.page-check-out .mid .col-sm-4 .product-title{
	font-size:4vw;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 1vw;
    line-height: 1.2;
}
.swiper-pagination{
	min-width: 100%;
	text-align: center;
}
.swiper-pagination-bullet{
	background: #ff7800;
	margin:0 1vw;
	width:2vw;
	height:2vw;
	border-radius: 50%;
	display: inline-block;
}
.swiper-pagination-bullet-active{
	background: #ff7800;
}
.page-check-out .bottom ul li a.mid-prv.swiper-button-disabled{
	color:#ddd;
}
.page-check-out .bottom ul li a.mid-next.swiper-button-disabled{
	color:#ddd;
}
.page-check-out .half{
	overflow: hidden;
	height:50%;
	width:100%;
	background: #1cdfff;
	position: relative;
}
.page-check-out .half.top-half{
	transform: rotateX(180deg);
	-webkit-transform: rotate(180deg);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	background: #f4f4f4;
}
.page-check-out .half .center{
	position: absolute;
	top:60%;
	left:0;
	right:0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.page-check-out .half .left{
	float: left;
	text-align: right;
	width:50%;
	padding-right: 2vw;
	box-sizing: border-box;
	margin-bottom: 5vw;
}
.page-check-out .half .right{
	float: right;
	text-align: left;
	width:50%;
	padding-left: 2vw;
	box-sizing: border-box;
	margin-bottom: 5vw;
}
.page-check-out .cancel{
	background: #0078ad;
	border-radius: 50%;
	clear: both;
	width:30vw;
	height:30vw;
	text-align: center;
	line-height: 30vw;
	color:#fff;
	font-size:6vw;
	margin:0 auto;
}
.page-check-out .half .strong{
	font-size:7vw;
	margin:3vw 0 0;
}
.page-check-out .half .left .strong{

	margin:3vw 0 2vw;
}
.page-check-out .half .right .strong{
	color:#dd4339;
}
.page-check-out .half .small{
	font-size:5vw;
}
.page-check-out .half .left .small{
}
.page-check-out .half .small span{
	font-size:7vw;
}
.page-check-out .half .pay-img{
	width:40vw;
	display: block;
	margin: 0 auto 2vw;
}
.page-check-out .half p{
	color:#ff7a01;
	text-align: center;
	width:100%;
	clear: both;
	font-size: 5vw;
}

.page-check-out .modal.alert .modal-content{
    text-align: center;
    font-size: 7vw;
    transform: translateY(-50%) rotateX(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    padding: 10vw 0;
}
.qrcode-position{
	position: absolute;
	top:50%;
	left:25%;
	width:48vw;
	height:48vw;
	transform: translateY(-50%);
	-webikit-transform: translateY(-50%);
	z-index: 999;
	border:1px solid #555;
}
/*.qrcode-position-border-1{
	position: absolute;
	top:0;
	height:10vw;
	left:0px;
	right:0px;
	border-left:3px solid #4CAF50;
	border-right:3px solid #4CAF50;
}
.qrcode-position-border-2{
	position: absolute;
	bottom:0;
	height:10vw;
	left:0px;
	right:0px;
	border-left:3px solid #4CAF50;
	border-right:3px solid #4CAF50;
}
.qrcode-position-border-3{
	position: absolute;
	top:0px;
	bottom:0px;
	width:10vw;
	left:0;
	border-top:3px solid #4CAF50;
	border-bottom:3px solid #4CAF50;
}
.qrcode-position-border-4{
	position: absolute;
	top:0px;
	bottom:0px;
	width:10vw;
	right:0;
	border-top:3px solid #4CAF50;
	border-bottom:3px solid #4CAF50;
}*/
.img-wrap img.ani{
	animation:ani 0.3s linear;
	-webkit-animation:ani 0.3s linear;
}

@keyframes ani
{
0% {transform:scale(1);}
50% {transform:scale(1.3);}
100% {transform:scale(1);}
}

@-webkit-keyframes ani /* Safari 和 Chrome */
{
0% {-webkit-transform:scale(1);}
50% {-webkit-transform:scale(1.3);}
100% {-webkit-transform:scale(1);}
}